import React, { useState, useEffect } from 'react';
import { Card, Row, Col, Button, Spin, Tabs, Progress, List, Tag, Divider, Avatar, Timeline } from 'antd';
import { BookOutlined, BulbOutlined, TrophyOutlined, RocketOutlined, UserOutlined } from '@ant-design/icons';
import './index.css';

const { TabPane } = Tabs;

/**
 * 升学规划组件 - 职业生涯规划的升学规划页面
 */
function CareerPlanning() {
  // 状态管理
  const [loading, setLoading] = useState(false);
  const [studentProfile, setStudentProfile] = useState(null);
  const [recommendations, setRecommendations] = useState([]);
  const [careerPath, setCareerPath] = useState([]);
  const [activeTab, setActiveTab] = useState('1');
  const [analysisDepth, setAnalysisDepth] = useState(3); // 1-5的分析深度

  // 模拟获取数据
  useEffect(() => {
    fetchStudentData();
  }, []);

  // 处理滑动条鼠标按下事件
  const handleSliderMouseDown = (e) => {
    e.preventDefault();
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  };

  // 处理鼠标移动事件
  const handleMouseMove = (e) => {
    const slider = document.querySelector('.career-depth-slider');
    const rect = slider.getBoundingClientRect();
    const position = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
    const newDepth = Math.ceil(position * 5);
    setAnalysisDepth(newDepth);
  };

  // 处理鼠标释放事件
  const handleMouseUp = () => {
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
    // 当深度改变时重新获取数据
    fetchStudentData();
  };

  // 模拟获取学生数据
  const fetchStudentData = () => {
    setLoading(true);
    // 模拟API调用延迟
    setTimeout(() => {
      // 模拟学生档案数据
      setStudentProfile({
        id: 1,
        studentNo: 'S20230001',
        studentName: '张三',
        grade: '高三',
        score: 650,
        rank: 1500,
        tags: ['理科', '计算机爱好者', '编程', '数学特长'],
        strengths: ['逻辑思维能力强', '数学成绩优秀', '编程基础扎实'],
        weaknesses: ['英语口语有待提高', '文学素养需加强'],
        interests: ['人工智能', '软件开发', '数据分析']
      });

      // 模拟专业推荐数据
      setRecommendations([
        {
          id: 1,
          majorName: '计算机科学与技术',
          collegeName: '清华大学',
          matchScore: 95,
          careerProspects: ['软件工程师', '算法工程师', '技术架构师'],
          matchAnalysis: '基于您的数学能力和编程兴趣，计算机科学与技术专业是极佳选择。清华大学的该专业在国内排名第一，就业前景广阔。',
          dimensionScores: {
            '学科兴趣': 98,
            '就业前景': 95,
            '院校环境': 96,
            '专业潜力': 94,
            '性格匹配': 92
          }
        },
        {
          id: 2,
          majorName: '人工智能',
          collegeName: '北京大学',
          matchScore: 92,
          careerProspects: ['AI研究员', '机器学习工程师', '数据科学家'],
          matchAnalysis: '您对人工智能的兴趣与该专业高度匹配，北京大学的人工智能专业师资力量雄厚，研究成果丰富。',
          dimensionScores: {
            '学科兴趣': 96,
            '就业前景': 94,
            '院校环境': 95,
            '专业潜力': 93,
            '性格匹配': 88
          }
        },
        {
          id: 3,
          majorName: '数据科学与大数据技术',
          collegeName: '浙江大学',
          matchScore: 90,
          careerProspects: ['数据分析师', '大数据工程师', '商业智能专家'],
          matchAnalysis: '结合您的数学特长和数据分析兴趣，该专业将为您提供系统的数据科学训练，浙江大学在该领域具有丰富的产学研合作资源。',
          dimensionScores: {
            '学科兴趣': 92,
            '就业前景': 93,
            '院校环境': 91,
            '专业潜力': 90,
            '性格匹配': 89
          }
        }
      ]);

      // 模拟职业发展路径
      setCareerPath([
        {
          stage: '本科阶段',
          duration: '4年',
          focus: '专业基础课程学习，参与科研项目，获取行业实习经验',
          keyMilestones: ['掌握编程基础', '参与ACM竞赛', '大学生创新项目', '知名企业实习']
        },
        {
          stage: '研究生阶段',
          duration: '2-3年',
          focus: '深入专业方向研究，发表学术论文，参与高水平项目',
          keyMilestones: ['发表SCI/EI论文', '参与国家级科研项目', '国际交流项目']
        },
        {
          stage: '就业起步期',
          duration: '1-3年',
          focus: '进入知名企业或研究机构，积累实战经验',
          keyMilestones: ['大型互联网公司工作', '技术专利申请', '项目管理经验']
        },
        {
          stage: '职业成长期',
          duration: '3-5年',
          focus: '技术深耕或管理转型，建立专业影响力',
          keyMilestones: ['技术专家', '团队管理', '行业影响力']
        },
        {
          stage: '职业成熟期',
          duration: '5年以上',
          focus: '行业领军者，创业或高管发展',
          keyMilestones: ['技术总监/CTO', '创业', '行业专家']
        }
      ]);

      setLoading(false);
    }, 1500);
  };

  // 重新分析按钮点击事件
  const handleReanalyze = () => {
    fetchStudentData();
  };

  return (
    <div className="career-planning-container">
      <h2 className="page-title">升学规划 - 职业生涯分析</h2>
      
      {/* 分析深度滑动条 */}
      <Card className="analysis-control-card">
        <div className="analysis-item">
          <span>分析深度</span>
          <div className="analysis-depth-container">
            <div className="analysis-depth-label">
              <span>浅</span>
              <span>深</span>
            </div>
            <div className="career-depth-slider">
              <div 
                className="slider-track" 
                style={{ width: `${analysisDepth * 20}%` }}
              ></div>
              <div 
                className="slider-handle" 
                style={{ left: `${analysisDepth * 20}%` }}
                onMouseDown={handleSliderMouseDown}
              ></div>
            </div>
          </div>
        </div>
        <Button 
          type="primary" 
          onClick={handleReanalyze} 
          className="reanalyze-btn"
        >
          重新分析
        </Button>
      </Card>

      {loading ? (
        <div className="loading-container">
          <Spin size="large" />
          <p>正在分析学生数据，生成升学规划方案...</p>
        </div>
      ) : (
        <Tabs activeKey={activeTab} onChange={setActiveTab} className="career-tabs">
          <TabPane 
            tab={<span><UserOutlined />学生档案分析</span>} 
            key="1"
          >
            {studentProfile && (
              <Card className="profile-card">
                <Row gutter={[24, 24]}>
                  <Col span={8}>
                    <div className="profile-basic">
                      <Avatar size={80} icon={<UserOutlined />} />
                      <h3>{studentProfile.studentName}</h3>
                      <p>学号: {studentProfile.studentNo}</p>
                      <p>年级: {studentProfile.grade}</p>
                      <p>分数: {studentProfile.score}</p>
                      <p>排名: {studentProfile.rank}</p>
                      <div className="profile-tags">
                        {studentProfile.tags.map((tag, index) => (
                          <Tag color="blue" key={index}>{tag}</Tag>
                        ))}
                      </div>
                    </div>
                  </Col>
                  <Col span={16}>
                    <div className="profile-analysis">
                      <h3>学生特点分析</h3>
                      <div className="strength-weakness">
                        <div className="analysis-section">
                          <h4><TrophyOutlined /> 优势</h4>
                          <ul>
                            {studentProfile.strengths.map((item, index) => (
                              <li key={index}>{item}</li>
                            ))}
                          </ul>
                        </div>
                        <div className="analysis-section">
                          <h4><BulbOutlined /> 待提升</h4>
                          <ul>
                            {studentProfile.weaknesses.map((item, index) => (
                              <li key={index}>{item}</li>
                            ))}
                          </ul>
                        </div>
                      </div>
                      <div className="interest-analysis">
                        <h4><BookOutlined /> 兴趣方向</h4>
                        <div className="interest-tags">
                          {studentProfile.interests.map((interest, index) => (
                            <Tag color="green" key={index}>{interest}</Tag>
                          ))}
                        </div>
                      </div>
                    </div>
                  </Col>
                </Row>
              </Card>
            )}
          </TabPane>
          
          <TabPane 
            tab={<span><BookOutlined />专业匹配分析</span>} 
            key="2"
          >
            <div className="major-recommendations">
              {recommendations.map((recommendation) => (
                <Card key={recommendation.id} className="recommendation-card">
                  <div className="recommendation-header">
                    <div>
                      <h3>{recommendation.majorName}</h3>
                      <h4>{recommendation.collegeName}</h4>
                    </div>
                    <div className="match-score">
                      <Progress 
                        type="circle" 
                        percent={recommendation.matchScore} 
                        width={80} 
                        format={(percent) => `${percent}%`}
                      />
                      <span>匹配度</span>
                    </div>
                  </div>
                  
                  <Divider />
                  
                  <div className="dimension-scores">
                    <h4>维度匹配分析</h4>
                    <Row gutter={[16, 16]}>
                      {Object.entries(recommendation.dimensionScores).map(([dimension, score]) => (
                        <Col span={8} key={dimension}>
                          <div className="dimension-item">
                            <span>{dimension}</span>
                            <Progress percent={score} size="small" />
                          </div>
                        </Col>
                      ))}
                    </Row>
                  </div>
                  
                  <div className="career-prospects">
                    <h4>就业前景</h4>
                    <div className="prospect-tags">
                      {recommendation.careerProspects.map((prospect, index) => (
                        <Tag color="purple" key={index}>{prospect}</Tag>
                      ))}
                    </div>
                  </div>
                  
                  <div className="match-analysis">
                    <h4>匹配分析</h4>
                    <p>{recommendation.matchAnalysis}</p>
                  </div>
                </Card>
              ))}
            </div>
          </TabPane>
          
          <TabPane 
            tab={<span><RocketOutlined />升学路径规划</span>} 
            key="3"
          >
            <Card className="career-path-card">
              <h3>职业发展路径规划</h3>
              <p className="path-description">
                基于您的学术背景、兴趣特点和职业倾向，我们为您规划了以下职业发展路径，
                帮助您清晰了解从大学到职场的成长轨迹。
              </p>
              
              <Timeline mode="left" className="career-timeline">
                {careerPath.map((path, index) => (
                  <Timeline.Item 
                    key={index} 
                    label={path.duration}
                    color={index === 0 ? 'green' : index < 3 ? 'blue' : 'purple'}
                  >
                    <div className="timeline-content">
                      <h4>{path.stage}</h4>
                      <p>{path.focus}</p>
                      <div className="milestone-list">
                        <h5>关键里程碑:</h5>
                        <ul>
                          {path.keyMilestones.map((milestone, idx) => (
                            <li key={idx}>{milestone}</li>
                          ))}
                        </ul>
                      </div>
                    </div>
                  </Timeline.Item>
                ))}
              </Timeline>
              
              <div className="path-advice">
                <h4>规划建议</h4>
                <p>
                  根据您的特点和兴趣，建议您在本科阶段注重基础课程学习的同时，积极参与科研项目和竞赛活动，
                  提前接触行业实践。研究生阶段可以选择更专业化的方向深入研究，为未来职业发展奠定坚实基础。
                </p>
                <p>
                  在就业选择上，可以优先考虑大型互联网公司或研究机构，积累实战经验后再根据个人发展意愿选择
                  技术深耕或管理转型路线。
                </p>
              </div>
            </Card>
          </TabPane>
        </Tabs>
      )}
    </div>
  );
}

export default CareerPlanning;